<script lang="ts">
import {defineComponent, PropType, ref, Ref, UnwrapRef} from "vue"
import {ResourceLibraryType} from "@/components/ResourceLibrary/config"
import {createdResourcesCateApi, deleteResourcesCateApi, getResourcesCateListApi, updatedResourcesCateApi} from "@/api/resources"
import {usePopupForm} from "@/components/FunctionComponents";
import {useConfirmDialog} from "@/hooks/DialogMsg";
import {CloneData} from "@/units/tool";

export default defineComponent({
  name: "Cate",
  emits: {
    change: (cate_id: number) => true,
    classify: (classify: { id: number, name: string }[]) => true
  },
  props: {
    cate_id: {
      type: Number,
      required: true
    },
    type: {
      type: String as PropType<ResourceLibraryType>,
      required: true
    }
  },
  setup(props, {emit}) {
    const cate: Ref<UnwrapRef<any[]>> = ref([])

    /**
     * 获取资源分类
     */
    function getResourcesCateList() {
      getResourcesCateListApi({type: props.type}).then(result => {
        if (result.code === 200) {
          emit('classify', CloneData(result.data))
          cate.value = result.data
        }
      })
    }

    /**
     * 设置选中分类
     * @param cate_id
     */
    function setDefaultActive(cate_id: number) {
      emit('change', cate_id)
    }

    /**
     * 编辑菜单分类
     * @param id
     * @constructor
     */
    function UpdatedResourcesCate(id: number) {
      usePopupForm({
        api: updatedResourcesCateApi,
        query: {id},
        width: '420px',
        successTips: false,
        onSuccess: getResourcesCateList
      })
    }

    /**
     * 删除资源分类
     * @param id
     */
    async function deleteResourcesCate(id: number) {
      let state = await useConfirmDialog("确定要删除所选分类吗?")
      if (state === false) {
        return;
      }
      let {code} = await deleteResourcesCateApi({id: id})
      if (code === 200) {
        setDefaultActive(0)
        getResourcesCateList()
      }
    }

    /**
     * 创建菜单分类
     */
    function createdResourcesCate() {
      usePopupForm({
        api: createdResourcesCateApi,
        query: {type: props.type},
        width: '420px',
        successTips: false,
        onSuccess: getResourcesCateList
      })
    }

    getResourcesCateList()

    return {
      cate, setDefaultActive, UpdatedResourcesCate, deleteResourcesCate, createdResourcesCate
    }
  }
})
</script>

<template>
  <div>
    <data-cell center right @click="setDefaultActive(0)" :active="cate_id===0">
      全部
    </data-cell>
    <data-cell center hover-left v-for="item in cate" :key="item.id" @click="setDefaultActive(item.id)" :active="cate_id===item.id">
      {{ item.name }}
      <template #right>
        <el-space class="app-vertical-middle">
          <svg-icon @click.stop="UpdatedResourcesCate(item.id)" color="var(--el-color-primary)" :size="16" name="edit"/>
          <svg-icon @click.stop="deleteResourcesCate(item.id)" color="#ff0000" :size="16" name="delete"/>
        </el-space>
      </template>
    </data-cell>
    <data-cell center>
      <svg-icon class="app-vertical-middle" color="var(--el-color-primary)" @click="createdResourcesCate" :size="16" name="push"></svg-icon>
    </data-cell>
  </div>
</template>

<style scoped lang="scss">
.res-cate {
  width: calc(100% - 5px);
  margin-right: 5px;
  height: 480px;

  :deep(.arco-list-content) {
    height: 480px;

    .arco-list-item {
      padding: 5px;

      .arco-list-item-main {
        .arco-list-item-content {
          text-indent: 1rem;
        }
      }
    }
  }
}
</style>